<template>
  <div class="goods">
    <div class="menu-wrapper" v-el:menu-wrapper>
      <ul>
        <li v-for="item in goods" :class="{'current': currentIndex===$index}" @click="selectMenu($index,$event)" class="menu-item">
          <span class="text border-1px">
            <span v-show="item.type > 0" :class="classMap[item.type]" class="icon"></span>
            {{ item.name }}
          </span>
        </li>
      </ul>
    </div>
    <div class="food-wrapper" v-el:food-wrapper>
      <ul>
        <li v-for="item in goods" class="food-list food-list-hook">
          <h2 class="title">{{ item.name }}</h2>
          <ul>
            <li @click="selectFood(food, $event)" v-for="food in item.foods" class="food-item">
              <div class="icon">
                <img width="56" height="56" :src="food.icon" alt="">
              </div>
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <p v-show="food.description" class="desc">{{ food.description }}</p>
                <div class="extra">
                  <span>月销{{ food.sellCount }}份</span>
                  <span>好评率{{ food.rating }}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{ food.price }}</span>
                  <span v-show="food.oldPrice" class="old">￥{{ food.oldPrice }}</span>
                </div>
              </div>
              <div class="cart-ctrl">
                <controll :food="food"></controll>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <cart v-ref:shopcart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></cart>
    <food :food="selectedFood" v-ref:food></food>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import Cart from 'components/shopcart/shopcart'
  import Controll from 'components/cartcontroll/cartcontroll'
  import Food from 'components/food/food'
  const ERR_NO = 0
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        goods: [],
        listHeight: [],
        scrollY: 0,
        selectedFood: {}
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

      this.$http.get('/api/goods').then( (response) => {
        response = response.body
        if(response.errno === ERR_NO){
          this.goods = response.data
          this.$nextTick( () => {
            this._initScroll()
            this._calculateHeight()
          })
        }
      })
    },
    computed: {
      currentIndex() {
        for(let i = 0; i < this.listHeight.length; i++){
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]

          if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
            return i
          }
        }
          return 0
      },
      selectFoods() {
        let foods = []
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if(food.count) {
              foods.push(food)
            }
          })
        })
        return foods
      }
    },
    methods: {
      selectMenu(index, event) {
        // 如果是原生的事件阻止掉
        if(!event._constructed){
          return
        }
        let foodList = this.$els.foodWrapper.getElementsByClassName('food-list-hook')
        let el = foodList[index]
        this.foodScroll.scrollToElement(el, 300)
      },
      selectFood(food, event) {
        if(!event._constructed) {
          return
        }
        this.selectedFood = food
        this.$refs.food.foodShow()
      },
      _drop(target) {
        /* 在把target穿给子组建 */
        this.$nextTick(() => {
          this.$refs.shopcart.drop(target)
        })
      },

      _initScroll() {
        this.menuScroll = new BScroll(this.$els.menuWrapper, {
          click: true
        })

        this.foodScroll = new BScroll(this.$els.foodWrapper, {
          click: true,
          probeType: 3
        })

        this.foodScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      },
      _calculateHeight() {
        // 获取元素
        let foodList = this.$els.foodWrapper.getElementsByClassName('food-list-hook')
        let iHeight = 0
        
        this.listHeight.push(iHeight)
        
        for(let i = 0; i < foodList.length; i++) {
          let item = foodList[i]
          iHeight += item.clientHeight
          this.listHeight.push(iHeight)
        }
      }
    },
    components: {
      Cart,
      Controll,
      Food
    },
    events: {
      'cart.add'(target) {
        // 这个方法接受的参数是从shopcart的drop方法传进来的对象
        this._drop(target)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../assets/style/minxin.stylus'
  .goods
    display: flex
    position: absolute
    top: 205px
    bottom: 48px
    width: 100%
    overflow: hidden
    .menu-wrapper
      flex: 0 0 80px
      width: 80px
      background-color: #f3f5f7
      .menu-item
        display: table
        width: 56px
        height: 54px
        padding: 0 12px
        line-height: 14px
        text-align: center
        &.current
          position: relative
          margin-top: -1px
          z-index: 10
          background-color: #fff
          .text
            border-none()
            font-weight: 700
            color: #333
        .text
          display: table-cell
          vertical-align: middle
          font-size: 12px
          line-height: 14px
          border-1px(rgba(7, 17, 27, .2))
        .icon
            display: inline-block
            vertical-align: top
            width: 12px
            height: 12px
            margin-right: 2px
            background-size: 12px 12px
            background-repeat: no-repeat
            &.decrease
              bg-image('decrease_3')
            &.discount
              bg-image('discount_3')
            &.guarantee
              bg-image('guarantee_3')
            &.invoice
              bg-image('invoice_3')
            &.special
              bg-image('special_3')
    .food-wrapper
      flex: 1
      .food-list
        .title
          height: 26px
          line-height: 26px
          font-size: 14px
          padding-left: 14px
          font-weight: 500
          border-left: 3px solid #d9ddee
          background-color: #f3f5f7
          color: rgb(147, 153, 159)
        .food-item
          display: flex
          margin: 18px
          padding-bottom: 18px
          clear: both
          border-1px(rgba(7, 17, 27, .1))
          &:last-child
            border-none()
            margin-bottom: 0
          .icon
            flex: 0 0 56px
            margin-right: 10px
          .content
            flex: 1
            .name, .desc, .extra
              margin-bottom: 8px
              font-size: 10px
              color: rgb(147, 153, 159)
            .name
              font-size: 14px
              line-height: 14px
              margin-top: 2px
              color: rgb(7, 17, 27)
            .price
              .now
                margin-right: 8px
                font-size: 14px
                color: rgb(240, 20, 20)
                font-weight: 700
              .old
                text-decoration: line-through
                font-size: 10px
                color: rgb(147, 153, 159)
          .cart-ctrl
            position: absolute
            right: 0
            bottom: 5px
</style>
